<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开福店</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div class="x-nav">

            <span class="layui-breadcrumb">
                <a href="">店铺管理</a>
                <a><cite>具体门店管理管理</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote">
                        欢迎来到:开福店 ！
                    </blockquote>
                </div>

                <div class="layui-card">
                    <div class="layui-card-header">数据可视化</div>
                    <div class="layui-card-body ">
                        <select name="city" lay-verify="">
                            <option value="">请选择一个季度</option>
                            <option value="010">第一季度</option>
                            <option value="021">第二季度</option>
                            <option value="0571">第三季度</option>
                            <option value="0571">第四季度</option>
                        </select>
                        <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                            <div id="main" style="width: 600px;height:400px;"></div>
                            <div id="charts2" style="width: 550px;height:400px;display: inline-block"></div>
                        </ul>
                    </div>
                </div>



                <script type="text/javascript">
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    var xAxisData = [];


                    xAxisData = ["January",
                        "February",
                        "March",
                        "April",
                        "May",
                        "June",
                        "July",
                        "August",
                        "September",
                        "October",
                        "November",
                        "December"]
                    //var data1 = [1,2,3,4,3,2,1,2,3,4,3,2];
                    var data1 = [];
                    data1[0]=[[${data30}]];
                    data1[1]=[[${data31}]];
                    data1[2]=[[${data32}]];
                    data1[3]=[[${data33}]];
                    data1[4]=[[${data34}]];
                    data1[5]=[[${data35}]];
                    data1[6]=[[${data36}]];
                    data1[7]=[[${data37}]];
                    data1[8]=[[${data38}]];
                    data1[9]=[[${data39}]];
                    data1[10]=[[${data310}]];
                    data1[11]=[[${data311}]];

                    //  for (var i =0;i<=11;i++){
                    //      data1.push(${data[i]});
                    //  }

                    // var data2 = [2,3,4,3,2,1,2,3,4,3,2,1];
                    // for (var i = 0; i < 100; i++) {
                    //     <!-- xAxisData.push('类目' + i); -->
                    //     data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
                    //     data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
                    // }
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '本店年度销售情况一览'
                        },
                        legend: {
                            data: ['bar', 'bar2']
                        },
                        toolbox: {
                            // y: 'bottom',
                            feature: {
                                magicType: {
                                    type: ['stack', 'tiled']
                                },
                                dataView: {},
                                saveAsImage: {
                                    pixelRatio: 2
                                }
                            }
                        },
                        tooltip: {},
                        xAxis: {
                            data: xAxisData,
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                        },
                        series: [{
                            name: 'bar',
                            type: 'bar',
                            data: data1,
                            animationDelay: function (idx) {
                                return idx * 10;
                            }
                        }
                            // , {
                            //     name: 'bar2',
                            //     type: 'bar',
                            //     data: data2,
                            //     animationDelay: function (idx) {
                            //         return idx * 10 + 100;
                            //     }
                            // }
                        ],
                        animationEasing: 'elasticOut',
                        animationDelayUpdate: function (idx) {
                            return idx * 5;
                        }
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                </script>

                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote">
                        门店地址： 开福区政府
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>